<template>
  <div>
      <headerMiddle title="精彩跟帖"/>
      <comment v-for="(item,index) of comments" :key="index" :commentItem="item" @reply="reply"/>
       <postDetailFooter :post="post" :isActive="replyActive" :replyObj="replyObj" @newComment="getComments"/>
  </div>
</template>

<script>
import headerMiddle from '../components/headerMiddle'
import comment from '../components/comment'
import postDetailFooter from '../components/postDetailFooter' 
export default {
    components: {
        headerMiddle,
        comment,
        postDetailFooter
    },
    data(){
       return {
        postId: this.$route.params.id,
        comments : [],
        post:{},
        replyActive:0,
        replyObj: {}
       }
    },
    methods:{
        reply(replyObj){
            // 之所以把replyActive设置为1，是因为没有找到什么好的解决方法，防止用户点击回复，又取消，然后第二次点击，输入框弹不出来的原因
             this.replyActive += 1;
            this.replyObj = replyObj;
            // console.log(this.replyObj)
        },
        getComments(){
             // 获取评论数据方法
            this.$axios({
                url: '/post_comment/' + this.postId,
                method: 'get',
            }).then(res=>{
                const {data} = res.data;
                console.log(res);
            data.forEach(element => {
                // 判断是否有头像，没有就每一项给一个默认头像，有的话，判断图片路径有没有以http服务器地址开头，没有的话，就把服务器地址加上去，这样才能访问服务器地址图片
                if(!element.user.head_img){
                    element.user.head_img="/static/imgs/touxian.jpg"
                }else{
                if(element.user.head_img.indexOf('http') < 0){
                    element.user.head_img= this.$axios.defaults.baseURL + element.user.head_img
                }
            }
                });
                // 处理好的数据，存入数组
            this.comments = data;
            })
         }
    },
    mounted(){
        this.$axios({
            url: '/post/' + this.postId,
            method: 'get'
        }).then(res=>{
            const {data} = res.data;
            this.post = data;
            // console.log(res)

        })
        this.getComments();
        
    }

}
</script>

<style>

</style>